'use client'

import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const advantages = [
  {
    title: '更专注',
    subtitle: 'MORE FOCUSED',
    description: '专注大家居行业，深耕垂直领域，提供行业定制化解决方案',
    icon: '🎯'
  },
  {
    title: '更智能',
    subtitle: 'MORE INTELLIGENT',
    description: 'AI驱动的智能营销系统，数据分析与决策支持全面升级',
    icon: '🧠'
  },
  {
    title: '更敏捷',
    subtitle: 'MORE AGILE',
    description: '快速响应市场变化，灵活调整策略，高效执行落地',
    icon: '⚡'
  },
  {
    title: '更落地',
    subtitle: 'MORE PRACTICAL',
    description: '从培训到实操，全程陪跑服务，确保方案真正落地见效',
    icon: '🚀'
  }
]

export default function AdvantagesSection() {
  const sectionRef = useRef<HTMLElement>(null)
  const titleRef = useRef<HTMLDivElement>(null)
  const cardsRef = useRef<HTMLDivElement>(null)
  const decorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const section = sectionRef.current
    const title = titleRef.current
    const cards = cardsRef.current
    const decor = decorRef.current

    if (!section || !title || !cards || !decor) return

    // 设置初始状态
    gsap.set([title, cards.children, decor], {
      opacity: 0,
      y: 60
    })

    // 创建时间轴
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: "top 80%",
        end: "bottom 20%",
        toggleActions: "play none none reverse"
      }
    })

    // 标题动画
    tl.to(title, {
      opacity: 1,
      y: 0,
      duration: 0.8,
      ease: "power3.out"
    })

    // 卡片动画 - 交错进入
    tl.to(cards.children, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      stagger: 0.15,
      ease: "back.out(1.7)"
    }, "-=0.4")

    // 底部装饰动画
    tl.to(decor, {
      opacity: 1,
      y: 0,
      duration: 0.6,
      ease: "power2.out"
    }, "-=0.3")

    // 悬停动画增强
    const cardElements = cards.children
    Array.from(cardElements).forEach((card) => {
      const icon = card.querySelector('.advantage-icon')
      const decorElement = card.querySelector('.advantage-decor')
      
      card.addEventListener('mouseenter', () => {
        gsap.to(card, {
          scale: 1.02,
          duration: 0.3,
          ease: "power2.out"
        })
        gsap.to(icon, {
          scale: 1.1,
          rotation: 5,
          duration: 0.3,
          ease: "back.out(1.7)"
        })
        gsap.to(decorElement, {
          rotation: 180,
          scale: 1.1,
          duration: 0.5,
          ease: "power2.out"
        })
      })

      card.addEventListener('mouseleave', () => {
        gsap.to(card, {
          scale: 1,
          duration: 0.3,
          ease: "power2.out"
        })
        gsap.to(icon, {
          scale: 1,
          rotation: 0,
          duration: 0.3,
          ease: "power2.out"
        })
        gsap.to(decorElement, {
          rotation: 45,
          scale: 1,
          duration: 0.5,
          ease: "power2.out"
        })
      })
    })

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill())
    }
  }, [])

  return (
    <section ref={sectionRef} id="advantages" className="py-12 sm:py-16 lg:py-20 bg-white dark:bg-black">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        {/* 标题 */}
        <div ref={titleRef} className="text-center mb-12 sm:mb-16">
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-black dark:text-white mb-4">
            4大核心竞争优势
          </h2>
          <div className="w-16 sm:w-24 h-1 bg-blue-600 mx-auto"></div>
        </div>

        {/* 优势网格 - 移动端单列，平板及以上双列 */}
        <div ref={cardsRef} className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 max-w-6xl mx-auto">
          {advantages.map((advantage, index) => (
            <div
              key={index}
              className="neo-brutal-card p-6 sm:p-8 group cursor-pointer"
              data-cursor-text="deep-dive"
            >
              {/* 图标 - 移动端稍小 */}
              <div className="advantage-icon text-4xl sm:text-5xl lg:text-6xl mb-4 sm:mb-6">
                {advantage.icon}
              </div>
              
              {/* 标题 - 响应式字体大小 */}
              <h3 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black dark:text-white mb-2">
                {advantage.title}
              </h3>
              
              {/* 英文副标题 - 移动端调整字体大小 */}
              <p className="text-sm sm:text-base lg:text-lg font-mono text-blue-600 mb-4 sm:mb-6 tracking-wider">
                {advantage.subtitle}
              </p>
              
              {/* 描述 - 移动端优化行高和字体大小 */}
              <p className="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
                {advantage.description}
              </p>
              
              {/* 装饰性元素 - 移动端稍小 */}
              <div className="mt-6 sm:mt-8 flex justify-end">
                <div className="advantage-decor w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 border-2 border-green-400 transform rotate-45 transition-transform duration-500"></div>
              </div>
            </div>
          ))}
        </div>

        {/* 底部装饰 */}
        <div ref={decorRef} className="mt-12 sm:mt-16 text-center">
          <div className="inline-flex items-center space-x-4">
            <div className="w-12 sm:w-16 h-0.5 bg-blue-600"></div>
            <span className="font-mono text-xs sm:text-sm text-gray-500">CORE_ADVANTAGES.exe</span>
            <div className="w-12 sm:w-16 h-0.5 bg-blue-600"></div>
          </div>
        </div>
      </div>
    </section>
  )
} 